import { Tabs, Message } from '@aws-amplify/ui-react';
import { TerminalCommand } from '@/components/InstallScripts';

<Message colorTheme="info" title="Link to other packages' migration guides">
Migration guides for [`Liveness`](#aws-amplifyui-react-liveness), [`In-App Messaging`](#aws-amplifyui-react-notifications) and [`Storage`](#aws-amplifyui-react-storage) packages can be found towards the bottom of this page.
</Message>

## `@aws-amplify/ui-react`

### Migrate from 5.x to 6.x
#### Installation
Install the 6.x version of both `@aws-amplify/ui-react` and `aws-amplify`.

<Message colorTheme="warning" title="Upgrade both @aws-amplify/ui-react and aws-amplify">
The 6.x version of `@aws-amplify/ui-react` has a minimum dependency of 6.x on `aws-amplify`. `aws-amplify@6` introduced breaking API changes.
</Message>

<Tabs.Container defaultValue='npm'>
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install @aws-amplify/ui-react@6.x aws-amplify@6.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add @aws-amplify/ui-react@6.x aws-amplify@6.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and usage

`@aws-amplify/ui-react@6.x` introduces the following breaking changes:

#### 1. Updates to the Authenticator

The `initialState` property now accepts `forgotPassword` in place of `resetPassword`:

```diff
- <Authenticator initialState="resetPassword" />
+ <Authenticator initialState="forgotPassword" />
```

The corresponding key of the `components` prop has been updated to reflect the change as well:

```diff
- <Authenticator components={{ ResetPassword: MyResetPassword }} />
+ <Authenticator components={{ ForgotPassword: MyForgotPassword }} />
```

---

The `user` object provided after an end user has been authenticated has been updated to reflect the `AuthUser` interface available from `aws-amplify/auth`:

```diff
- interface AmplifyUser {
-   challengeName?: ChallengeName;
-   attributes?: CognitoAttributes;
-   username: string;  
- }
+ interface AuthUser  {
+   username: string;
+   userId: string;
+   signInDetails?: CognitoAuthSignInDetails;
+ }
```

`AuthUser` can be imported from `aws-amplify/auth`:

```ts
import { AuthUser } from 'aws-amplify/auth';
```

User attributes are now available by directly calling `fetchUserAttributes`:

```ts
import { fetchUserAttributes } from 'aws-amplify/auth';

const userAttributes = await fetchUserAttributes();
```

---

The function signatures of the `services` interface have been updated to align with the shape of the underlying `aws-amplify/auth` APIs used by the `Authenticator` and provide improved typescript support:

```diff
interface AuthenticatorProps {
  services?: {
-    getCurrentUser?: () => Promise<any>,
+    getCurrentUser?: () => Promise<AuthUser>,

-    handleSignIn?: ({ username, password, }: { username: string;password: string; }) => Promise<any>,
+    handleSignIn?: (input: SignInInput) => Promise<SignInOutput>,

-    handleSignUp?: (formData: any) => Promise<ISignUpResult>,
+    handleSignUp?: (input: SignUpInput) => Promise<SignUpOutput>,

-    handleConfirmSignIn?: ({ user, code, mfaType, }: { user: any; code: string; mfaType: ChallengeName; }) =>Promise<any>),
+    handleConfirmSignIn?: (input: ConfirmSignInInput) => Promise<ConfirmSignInOutput>,

-    handleConfirmSignUp?: ({ username, code, }: { username: string; code: string; }) => Promise<any>,
+    handleConfirmSignUp?: (input: ConfirmSignUpInput) => Promise<ConfirmSignUpOutput>,

-    handleForgotPasswordSubmit?: ({ username, code, password, }: { username: string; code: string; password:string; }) => Promise<string>),
+    handleForgotPasswordSubmit?: (input: ConfirmResetPasswordInput) => Promise<void>,

-    handleForgotPassword?: (formData: any) => Promise<any>,
+    handleForgotPassword?: (input: ResetPasswordInput) => Promise<ResetPasswordOutput>,
  }
}
```

The input and return type interfaces are available as imports from `aws-amplify/auth`:

```ts
import { ConfirmSignInInput } from 'aws-amplify';
```

#### 2. Expander is now Accordion

The Expander component has been replaced by the [`Accordion`](../components/accordion) component in Amplify UI v6. The Accordion is fully composable and uses HTML elements `<summary>` and `<details>`. 

```jsx
<Expander type="single">
  <ExpanderItem title="Is it accessible?" value="demo-item-1">
    Yes! It adheres to the WAI-ARIA design pattern.
  </ExpanderItem>
  <ExpanderItem title="Can I customize the styling?" value="demo-item-2">
    Of course! See the section on CSS Styling below.
  </ExpanderItem>
  <ExpanderItem
    title="Is it a great way to organize content?"
    value="demo-item-3"
  >
    Most definitely!
  </ExpanderItem>
</Expander>

// Becomes 

<Accordion
  items={[
    {
      trigger: 'Is it accessible?',
      value: 'accessible',
      content: 'Yes! It uses HTML native elements: <details> and <summary>.'
    },
    {
      trigger: 'Can I customize the styling?',
      value: 'styling',
      content: 'Of course! See the section on CSS Styling below.'
    },
    {
      trigger: 'Is it a great way to organize content?',
      value: 'content',
      content: 'Most definitely!'
    }
  ]}
/>
```

The [`Accordion`](../components/accordion) is also fully composable now too:

```jsx
<Accordion.Container>
  <Accordion.Item value="Accordion-item">
    <Accordion.Trigger>
      What is an Accordion?
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      An Accordion contains all the parts of a collapsible section.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="unique-value">
    <Accordion.Trigger>
      This is the item title
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      The `children` of the Accordion are displayed here.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Container>
```

**Behavior**

Here are some differences in behavior between the Expander and Accordion components:

* The Accordion allows only 1 item expanded by default, while the Expander allowed multiple items expanded by default. To allow multiple open with Accordion, you need to add the allowMultiple prop.
* The Accordion cannot be fully collapsed by default, while the Expander could be collapsed. To make the Accordion always have 1 item open, use the preventCollapse prop.

**Styling**

The class names have changed between Expander and Accordion. Here is a mapping:

* `amplify-expander` -> `amplify-accordion`
* `amplify-expander__item` -> `amplify-accordion__item`
* `amplify-expander__content` -> `amplify-accordion__content`
* `amplify-expander__header` -> `amplify-accordion__trigger`
* `amplify-expander__icon` -> `amplify-accordion__icon`

The `--amplify-components-accordion-` CSS variables can also be used to style Accordion.

#### 3. Tabs refactor

The [`Tabs`](../components/tabs) component is now fully composable and more light-weight after removing the Radix dependency. 

```diff
- import { Tabs, TabItem } from '@aws-amplify/ui-react'
+ import { Tabs } from '@aws-amplify/ui-react'

- <Tabs>
-  <TabItem title="Tab 1">
-    Tab 1 Content
-  </TabItem>

+ <Tabs.Container defaultValue="Tab 1">
+  <Tabs.List>
+    <Tabs.Item value="Tab 1">Tab 1</Tabs.Item>
+  </Tabs.List>
+  <Tabs.Panel value="Tab 1">
+    Tab 1 Content
+  </Tabs.Panel>
```

You can also use the Tabs in a uncomposed way too:

```jsx
  <Tabs
    defaultValue={'Tab 1'}
    items={[
      { label: 'Tab 1', value: 'Tab 1', content: 'Tab content #1' },
      { label: 'Tab 2', value: 'Tab 2', content: 'Tab content #2' },
      { label: 'Tab 3', value: 'Tab 3', content: 'Tab content #3' },
    ]}
  />
```

Some notable differences:

* Instead of providing a `defaultIndex` or `currentIndex` you provide a `defaultValue` or `value`. Each Tabs.Item and Tabs.Panel should have a `value` that matches with the corresponding element.
* `onChange` becomes `onValueChange`
* You should supply a `defaultValue` or `value` or else there will be no default selected tab. Previously the Tabs component would default to the first tab.

There are also more design tokens and better CSS classes for easier customization. 

#### 4. Removal of extraneous `data` attributes and updating classNames

https://github.com/aws-amplify/amplify-ui/pull/4452

If you were using `[data-]` attributes in CSS to target styling components you will need to change these selectors to classes. 

ClassName updates:

* `amplify-loader__percentage-text` -> `amplify-loader__label`
* `amplify-menu-content-wrapper` -> `amplify-menu__wrapper`
* `amplify-menu-trigger` -> `amplify-menu__trigger`
* `amplify-menu-content` -> `amplify-menu__content`
* `amplify-menu-content__item` -> `amplify-menu__content__item`
* `amplify-pagination__item-button` -> `amplify-pagination__item`
* `amplify-pagination__item-current` -> `amplify-pagination__item--current`
* `amplify-pagination__item-ellipsis` -> `amplify-pagination__item--ellipsis`
* `amplify-rating-icon-container` -> `amplify-rating__item`
* `amplify-rating-icon` -> `amplify-rating__icon`
* `amplify-rating-icon-filled` -> `amplify-rating__icon--filled`
* `amplify-rating-icon-empty` -> `amplify-rating__icon--empty`
* `amplify-select__icon-wrapper` -> `amplify-select__icon`
* `.amplify-switch-label` -> `.amplify-switch__label`
* `.amplify-switch-thumb` -> `.amplify-switch__thumb`
* `.amplify-switch-track` -> `.amplify-switch__track`

#### 5. Moving brand.primary and brand.secondary up a level

To make it easier to access the primary and secondary colors in the Theme, we removed the `brand` namespace and moved `primary` and `secondary` up a level.

```diff
- tokens.colors.brand.primary[10]
+ tokens.colors.primary[10]
```


```diff
const theme = createTheme({
  tokens: {
    colors: {
-       brand: {
        primary: {
          //... 
        }
-       }
    }
  }
})
```

We also added the ability to easily set the entire range of primary and secondary colors at the theme level

```ts
const theme = createTheme({
  primaryColor: 'red',
  secondaryColor: 'green'
});
```

### Migrate from 4.x to 5.x
#### Installation
Install the 5.x version of the `@aws-amplify/ui-react` library.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install @aws-amplify/ui-react@5.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add @aws-amplify/ui-react@5.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and usage

`@aws-amplify/ui-react@5.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-react@5.x` drops Amplify Geo components. They are moved to a separate new package `@aws-amplify/ui-react-geo`.
Install the 1.x version of the `@aws-amplify/ui-react-geo` library and update your existing imports accordingly.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install @aws-amplify/ui-react-geo@1.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add @aws-amplify/ui-react-geo@1.x" />
  </Tabs.Panel>
</Tabs.Container>

Styles supporting Amplify Geo UI components are moved to `@aws-amplify/ui-react-geo` library and are not available through `@aws-amplify/ui-react` library anymore.
When using components like `MapView` or `LocationSearch` from `@aws-amplify/ui-react-geo` library, import the styles from the same library as well.

```tsx
import '@aws-amplify/ui-react-geo/styles.css';
```

For example, you can import the MapView component with related styles from `@aws-amplify/ui-react-geo` library.

```tsx
import { Amplify } from 'aws-amplify';
import { MapView } from '@aws-amplify/ui-react-geo';

import '@aws-amplify/ui-react-geo/styles.css';

import awsExports from './aws-exports';

Amplify.configure(awsExports);

export default function BasicMap() {
  return <MapView />;
}
```

#### 2. `@aws-amplify/ui-react@5.x` drops Amplify Notifications components. They are moved to a separate new package `@aws-amplify/ui-react-notifications`.
Install the 1.x version of the `@aws-amplify/ui-react-notifications` library and update your existing imports accordingly.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install @aws-amplify/ui-react-notifications@1.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add @aws-amplify/ui-react-notifications@1.x" />
  </Tabs.Panel>
</Tabs.Container>

For example, you can import the In-App messaging components like InAppMessageDisplay and InAppMessagingProvider from `@aws-amplify/ui-react-notifications` library.

```tsx
import { Text } from '@aws-amplify/ui-react';
import {
  InAppMessageDisplay
  InAppMessagingProvider,
} from '@aws-amplify/ui-react-notifications';

import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';

Amplify.configure(awsExports);

const App = () => {
  useEffect(() => {
    InAppMessaging.syncMessages();
  }, []);

  return (
    <InAppMessagingProvider>
      <InAppMessageDisplay />
      <Text>In-App Messaging Example</Text>
    </InAppMessagingProvider>
  );
};
```

#### 3. `@aws-amplify/ui-react@5.x` removes the `to` prop from the `Link` component.

If using a `Link` component with the `to` prop, remove `to` and instead extend from the underlying rendered third-party `Link`. For example, using React Router `Link` with the Amplify UI `Link` component:

```tsx
import { Link } from '@aws-amplify/ui-react';
import { Link as ReactRouterLink } from 'react-router-dom';

<Link as={ReactRouterLink} to="/">Home</Link>
```

#### 4. `@aws-amplify/ui-react@5.x` updates component types to include the underlying rendered HTML element's attributes and strictly types the `View` component.

### Migrate from 3.x to 4.x
#### Installation
Install the 4.x version of the `@aws-amplify/ui-react` library and the 5.x version of the `aws-amplify` library.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install aws-amplify@5.x @aws-amplify/ui-react@4.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add aws-amplify@5.x @aws-amplify/ui-react@4.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and usage

`@aws-amplify/ui-react@4.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-react@4.x` removes `isMultiline` prop from `TextField`.

Replace any `TextField` components using the `isMultiline` prop with the `TextAreaField` component.

```diff
- <TextField
-  isMultiline
+ <TextAreaField
```

#### 2. `@aws-amplify/ui-react@4.x` moves text directionality support to ThemeProvider

<Message colorTheme="info" heading="Note">
  If you are NOT using `dir="rtl"` in your application, feel free to skip this item.
</Message>

`@aws-amplify/ui-react` has a dependency on Radix components for Menu, SliderField, Tabs, and Expander. There were a number of changes in the [July 21, 2022 release](https://www.radix-ui.com/primitives/docs/overview/releases#july-21-2022) of `radix-ui/*` packages, and the breaking change for `@aws-amplify/ui-react` was removal of support for the `dir` HTML attribute, and the addition of the `DirectionProvider`. In order to make the transition seamless for most of Amplify users, we've added the `DirectionProvider` with a default `direction` of `ltr` to the `ThemeProvider`.

If your application is using right to left directionality, the example below shows the needed change for apps using the native HTML `dir="rtl"`:

```diff
- <View dir="rtl">
+ <ThemeProvider direction="rtl">
```
Also see: [Internationalization](/getting-started/internationalization)

#### 3. `@aws-amplify/ui-react@4.x` removes legacy component exports

The following deprecated components imported from `@aws-amplify/ui-react/legacy` are removed:

- [AmplifyAuthenticator](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md)
- [AmplifySignIn](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md)
- [AmplifySignOut](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-sign-out/readme.md)
- [AmplifyChatbot](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md)
- [AmplifyPhotoPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md)
- [AmplifyPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-picker/readme.md)
- [AmplifyS3Album](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md)
- [AmplifyS3Image](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image/readme.md)
- [AmplifyS3ImagePicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md)
- [AmplifyS3Text](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text/readme.md)
- [AmplifyS3TextPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md)
- withAuthenticator

Depending on the v1 version of this package and re-exporting these components caused issues. If you still want to use these legacy components you can depend on the v1 version of this package with an npm alias in your dependencies: 

`"@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9"`

[Documentation for legacy components](https://github.com/aws-amplify/amplify-js/tree/v4-stable/packages/amplify-ui-components#readme)


#### 4. `@aws-amplify/ui-react@4.x` adds `inputStyles` prop to Field primitives

Before 4.0, Field components like `TextField` would try to intelligently apply certain style props onto the wrapper element and some on the input element. We felt this was a little too opaque to users, but we still want to allow you to style the input element directly. `@aws-amplify/ui-react@4.x` adds an `inputStyles` prop to Field components so you can apply style props directly on the input (or `textarea` or `select`) as well as on the wrapper element. 

Hopefully this change won't affect your code but will allow for more customization and control. 

<Message colorTheme="info" heading="Note">
  The TextAreaField component does apply 1 style prop directly on the `textarea` element: `resize`. We felt this one makes sense to apply direclty on the the `textarea` element and not the wrapper element.
</Message>

#### 5. `@aws-amplify/ui-react@4.x` moves automatic signin on signup logic to `aws-amplify`. 

If you are overriding `Auth.signUp`, update the override function call to include the `autoSignIn` option set to `enabled`. If this change is not made, users will not be automatically signed in on signup.

```diff
 async handleSignUp(formData) {
  let { username, password, attributes } = formData;
  // custom username
  username = username.toLowerCase();
  attributes.email = attributes.email.toLowerCase();
  return Auth.signUp({
    username,
    password,
    attributes,
+   autoSignIn: {
+     enabled: true
+   }
  });
}

```

##### 6. `@aws-amplify/ui-react@4.x` removes legacy i18n translation keys removed

We replaced following legacy Authenticator texts:

- `Forgot your password? ` with the trailing space is replaced by `Forgot your password`.

If you were using `I18n` to translate those keys, please update your translations accordingly to match the new strings.

### Migrate from 2.x to 3.x

#### Installation
Install the 3.x version of the `@aws-amplify/ui-react` library.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install aws-amplify @aws-amplify/ui-react@3.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add aws-amplify @aws-amplify/ui-react@3.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and usage

`@aws-amplify/ui-react@3.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-react@3.x` removes the built-in icons (Icon360, IconSave, etc).

Replace any icon components in use the react-icons package or other React icon libraries in its place.

```diff
- import { IconSave } from '@aws-amplify/ui-react';
+ import { MdSave } from 'react-icons/md';
```

Note: We did not remove the [Icon](/react/components/icon) component, which allows customers to easily add SVG icons using the `pathData` prop.

##### 2. `@aws-amplify/ui-react@3.x` removes `ShareText`.

This export has been removed and should no longer be used.

### Migrate from 1.x to 2.x
#### Installation

Install the 2.x version of the `@aws-amplify/ui-react` library.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install aws-amplify @aws-amplify/ui-react@2.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add aws-amplify @aws-amplify/ui-react@2.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and Usage

Update the **App.js** with the new `Authenticator` and remove the old `AmplifyAuthenticator` as seen below:

**App.js**

```diff
- import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';

+ import { Authenticator } from '@aws-amplify/ui-react';
+ import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

 const App = () => (
-  <AmplifyAuthenticator>
-    <div>
-      My App
-      <AmplifySignOut />
-    </div>
-  </AmplifyAuthenticator>
+  <Authenticator>
+      {({ signOut, user }) => (
+        <main>
+          <h1>Hello {user.username}</h1>
+          <button onClick={signOut}>Sign out</button>
+        </main>
+      )}
+    </Authenticator>
);

```

#### Authenticator breaking changes (1.x to 2.x)

The latest version of the `Authenticator` component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.

#### Slots

All the slot locations have changed with the latest version of the `Authenticator`. To get a
sense of the changes please check out the [Headers and Footers](../connected-components/authenticator/customization#headers--footers) section.

#### Form Fields

The latest version of the `Authenticator` has a different format for the `formFields` prop. It also no longer accepts
`inputProps` nor `hint`. Instead, it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
[Sign Up Fields customization](../connected-components/authenticator/customization#sign-up-fields). For more information on form field customizations
please see the [Form Field Customization](../connected-components/authenticator/customization#form-field-customization) section.

#### CSS Styling

The latest version of the `Authenticator` has a completely different set of CSS variables. Please look over the [Amplify CSS Variables](../connected-components/authenticator/customization#styling) section for more information.

#### `onAuthUIStateChange`

Previous versions of `Authenticator` exposed a `onAuthUIStateChange` handler to detect Auth state changes. For similar functionality see [useAuthenticator](/react/connected-components/authenticator/advanced#access-auth-state).

## `@aws-amplify/ui-react-liveness`
### Migrate from 2.x to 3.x
#### Installation

Install the 3.x version of the `@aws-amplify/ui-react-liveness` library.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install aws-amplify@6.x @aws-amplify/ui-react-liveness@3.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add aws-amplify@6.x @aws-amplify/ui-react-liveness@3.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and Usage

Optionally update your App with the new prop usage:

**App.js**

```diff
 const App = () => (
  return (
    <ThemeProvider>
      {loading ? (
        <Loader />
      ) : (
        <FaceLivenessDetector
          sessionId={createLivenessApiData.sessionId}
          region="us-east-1"
          onAnalysisComplete={handleAnalysisComplete}
-         disableInstructionScreen={true}
+         disableStartScreen={true}
        />
      )}
    </ThemeProvider>
  );
);

```

#### CDN CSP Policy

The 3.x version of the `FaceLivenessDetector` has been updated to use the latest version of TensorFlow and Blazeface, thus the default CDN paths have changed. If your application has an existing CSP policy, ensure your policy allows https://cdn.liveness.rekognition.amazonaws.com. If you are using a custom CDN make sure to update your CDN versions to match [@tensorflow/tfjs-backend-wasm](https://www.npmjs.com/package/@tensorflow/tfjs-backend-wasm/v/4.11.0) and [@tensorflow-models/face-detection](https://www.npmjs.com/package/@tensorflow-models/face-detection/v/1.0.2).Please look over the [Liveness Config](../connected-components/liveness/customization#facelivenessdetectorconfig) section for more information.

### Migrate from 1.x to 2.x
#### Installation

Install the 2.x version of the `@aws-amplify/ui-react-liveness` library.

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install aws-amplify@5.x @aws-amplify/ui-react-liveness@2.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add aws-amplify@5.x @aws-amplify/ui-react-liveness@2.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and Usage

Optionally update your App with the new prop usage:

**App.js**

```diff
 const App = () => (
  return (
    <ThemeProvider>
      {loading ? (
        <Loader />
      ) : (
        <FaceLivenessDetector
          sessionId={createLivenessApiData.sessionId}
          region="us-east-1"
          onAnalysisComplete={handleAnalysisComplete}
-         onError={(error) => {
-           console.error(error);
-         }}
+         onError={(livenessError) => {
+           console.error({ state: livenessError.state, error: livenessError.error});
+         }}
        />
      )}
    </ThemeProvider>
  );
);

```

#### CDN CSP Policy

The 2.x version of the `FaceLivenessDetector` has updated the default CDN for TensorFlow and Blazeface to a new URL. If your application has an existing CSP policy, update your policy to allow https://cdn.liveness.rekognition.amazonaws.com. Please look over the [Liveness Config](../connected-components/liveness/customization#facelivenessdetectorconfig) section for more information.


## `@aws-amplify/ui-react-notifications`
#### Installation
Install the 2.x version of `@aws-amplify/ui-react-notifications` and the 6.x version of `aws-amplify`.

<Message colorTheme="warning" title="Upgrade both @aws-amplify/ui-react and aws-amplify">
The 2.x version of `@aws-amplify/ui-react-notifications` has a minimum dependency of 6.x on `aws-amplify`. `aws-amplify@6` introduced breaking API changes.
</Message>

<Tabs.Container defaultValue='npm'>
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install @aws-amplify/ui-react-notifications@2.x aws-amplify@6.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add @aws-amplify/ui-react-notifications@2.x aws-amplify@6.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and usage

`@aws-amplify/ui-react-notifications@2.x` introduces the following breaking changes:
## Migrate from 1.x to 2.x

Starting with `aws-amplify@6`, the Notifications category is no longer exported from the base `aws-amplify` package. If you are using in-app messaging you will need to change your imports accordingly and run `initializeInAppMessaging` before your application code:

```diff
- import { Amplify, Notifications } from 'aws-amplify'
+ import { Amplify } from 'aws-amplify';
+ import { initializeInAppMessaging, syncMessages } from 'aws-amplify/in-app-messaging';
- import exports from './aws-exports';
+ import config from './amplifyconfiguration';

Amplify.configure(config);

- const { InAppMessaging } = Notifications;
+ initializeInAppMessaging()

const MyApp = () => {
  React.useEffect(() => {
-    InAppMessaging.syncMessages()
+    syncMessages();
  }, [])

  // ..
}
```

## `@aws-amplify/ui-react-storage`
### Migrate from 2.x to 3.x
#### Installation
Install the 3.x version of `@aws-amplify/ui-react-storage` and the 6.x version of `aws-amplify`.

<Message colorTheme="warning" title="Upgrade both @aws-amplify/ui-react-storage and aws-amplify">
The 3.x version of `@aws-amplify/ui-react-storage` has a minimum dependency of 6.x on `aws-amplify`. `aws-amplify@6` introduced breaking API changes.
</Message>

<Tabs.Container defaultValue='npm'>
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install @aws-amplify/ui-react-storage@3.x aws-amplify@6.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add @aws-amplify/ui-react-storage@3.x aws-amplify@6.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and usage

`@aws-amplify/ui-react-storage@3.x` introduces the following breaking changes:

#### 1. public accessLevel becomes 'guest' in Storage components

Starting in v6 of the Amplify JS libraries, `'public'` access level, meaning unauthentiated users can access it, became `'guest'`. The `accessLevel` property on FileUploader and StorageImage components have been updated to reflect this change.
